<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <a-page-header @back="handleBack">
                <template #title> {{ reportName }} </template>
            </a-page-header>
            <div style="padding: 16px 24px">
                <div class="margin-b-16" style="padding: 0 8px">
                    <filter-form @change="handleChange" />
                </div>
                <flexbox justify="space-between" style="padding: 0 8px 8px 8px">
                    <span>流程列表</span>
                    <div>
                        <a-button type="primary" @click="handleExport">导出报告</a-button>
                    </div>
                </flexbox>
                <CustomTable
                    autoResize
                    rowKey="id"
                    size="small"
                    :loading="loading"
                    :columns="tableColumns"
                    :data-source="list"
                    :pagination="paginationConfig"
                    @change="handleTableChange"
                >
                    <template #status="{ record }">
                        <div v-if="record.status === '待处理'">待处理</div>
                        <div v-if="record.status === '进行中'">
                            进行中
                            <ClockCircleOutlined class="warning-color" />
                        </div>
                        <div v-if="record.status === '完成'">
                            已完成
                            <CheckCircleOutlined class="success-color" />
                        </div>
                        <div v-if="record.status === '已拒绝'">
                            已拒绝
                            <CloseCircleOutlined class="error-color" />
                        </div>
                        <div v-if="record.status === '废弃'">
                            废弃
                            <CloseCircleOutlined class="error-color" />
                        </div>
                    </template>
                    <template #dataSource="{ text }">
                        {{ text === '外部' ? '外部' : '内部' }}
                    </template>
                    <template #action="{ record }">
                        <a @click="showDetail(record.id)">查看详情</a>
                        <a-divider
                            type="vertical"
                            v-if="['已拒绝', '进行中'].includes(record.status)"
                            v-auth="'energyManage.analysisReport.list.stopFlow'"
                        />
                        <a
                            @click="handleStop(record)"
                            v-if="['已拒绝', '进行中'].includes(record.status)"
                            v-auth="'energyManage.analysisReport.list.stopFlow'"
                            >中止流程</a
                        >
                    </template>
                </CustomTable>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { CustomTable } from '@/components';
import FilterForm from './components/FilterForm.vue';
import { usePagination } from '@/components/Table/hooks';
import { downByBlob } from '@/utils/file/downFile';
import { message } from 'ant-design-vue/es';
import { useMessage } from '@/hooks/common/useMessage';
import { useRouter, useRoute } from 'vue-router';
import { ClockCircleOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        ClockCircleOutlined,
        CloseCircleOutlined,
        CheckCircleOutlined,
        FilterForm
    },
    setup() {
        const { paginationConfig, setPaginationConfig } = usePagination();
        const router = useRouter();
        const route = useRoute();
        const { handleBack } = useRouterApi({
            backQuery: {
                path: '/setting'
            }
        });
        const tableColumns = [
            {
                title: '系统名称',
                dataIndex: 'systemName'
            },
            {
                title: '产品负责人',
                dataIndex: 'productManager'
            },
            {
                title: '项目经理/负责人',
                dataIndex: 'requireManager'
            },
            {
                title: '业务方',
                dataIndex: 'businessSide'
            },
            {
                title: '数据来源',
                dataIndex: 'dataSource',
                slots: { customRender: 'dataSource' }
            },
            {
                title: '流程状态',
                dataIndex: 'status',
                slots: { customRender: 'status' }
            },
            {
                title: '审核意见',
                dataIndex: 'auditOpinion'
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                slots: { customRender: 'action' }
            }
        ];
        const state = reactive<any>({
            loading: false,
            list: [],
            reportName: '',
            searchQuery: {}
        });
        const showDetail = (id) => {
            router.push({
                path: '/energyManage/analysisReport/detail',
                query: {
                    id
                }
            });
        };
        const handleStop = async ({ id, systemName }) => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认中止流程${systemName}?`,
                iconType: 'warning',
                okText: '确认',
                keyboard: false,
                onOk: async () => {
                    const query = {
                        id
                    };
                    const { success, errorMsg } = await api.requireReportModel.discardById(query);
                    if (success) {
                        getDetailData();
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        const handleExport = async () => {
            const query = {
                id: route.query.id
            };
            const res = await api.requireReportModel.reportsDown(query, { responseType: 'blob' });
            res && downByBlob(res, state.reportName + '.xls');
        };
        const getDetailData = async () => {
            if (route.query.reportName) {
                state.reportName = route.query.reportName;
            }
            state.loading = true;
            const query = {
                reportId: route.query.id,
                pageNum: paginationConfig.value.current,
                pageSize: paginationConfig.value.pageSize,
                ...state.searchQuery
            };
            const { success, moule, totalCount, errorMsg } = await api.requireReportModel.findByReportId(query);
            if (success) {
                state.list = [...moule];
                setPaginationConfig({
                    total: totalCount
                });
            } else {
                message.error(errorMsg);
            }
            state.loading = false;
        };
        const handleTableChange = (val) => {
            setPaginationConfig(val);
            getDetailData();
        };
        const handleChange = (query) => {
            setPaginationConfig({
                current: 1
            });
            state.searchQuery = {
                ...query
            };
            getDetailData();
        };
        getDetailData();
        return {
            tableColumns,
            ...toRefs(state),
            handleBack,
            getDetailData,
            showDetail,
            handleStop,
            handleExport,

            paginationConfig,
            handleChange,
            handleTableChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>